<template>
    <view>
<!-- 歌曲收藏列表 -->
<view class="audio-list" style="text-align: center; width: 100%;" v-for="(current,index) in audioList" :key="index">
  <audio style="text-align: left" :src="current.src" :poster="current.img" :name="current.name" :author="current.author" controls>
  </audio>
  <uni-icons type="trash-filled" size="60" color="red" @click="showDeleteDialog(current)">
  </uni-icons>
</view>
<!-- 确认取消收藏弹窗框 -->
<view class="example-body box">
  <uni-popup ref="deleteDialog" type="dialog">
    <uni-popup-dialog :title="'取消收藏'" :content="'您确定要取消收藏歌曲 <<' + currentToDelete.name + ' >>吗？'" @confirm="confirmDelete(currentToDelete.id)">
    </uni-popup-dialog>
  </uni-popup>
</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                audioList: [], // 音频数据
                currentToDelete: {} // 存储当前要删除的歌曲 ID
            }
        },
        methods: { // 获取歌曲收藏初始数据
            fetchMusicData() {
                uni.request({
                    url: "https://apifoxmock.com/m1/5460619-0-default/getAllFavorite",
                    method: 'GET',
                    success: (res) => {
                        if (res.statusCode === 200) {
                            this.audioList = res.data;
                            this.audioLoading = false; // 加载完成，设置加载状态为 false
                        }
                    },
                    fail: (err) => {
                        // 处理网络错误
                        uni.showToast({
                            title: '网络错误，请稍后再试',
                            icon: 'none'
                        });
                    }
                });
            },
        // 显示删除确认框
        showDeleteDialog(current) {
          this.$refs.deleteDialog.open();
          // 存储当前要删除的歌曲信息
          this.currentToDelete = current;
        },
        
        // 确认删除
        confirmDelete(id) {
          uni.request({
            url: `https://m1.apifoxmock.com/m1/5460619-0-default/deleteFavoriteById/${id}`,
            method: 'DELETE', // 请求方式
            success: (res) => {
              if (res.data.statusCode === 200) {
                uni.showToast({
                  title: res.data.message
                })
                this.audioList = res.data.data;
              } else {
                uni.showToast({
                  title: "删除失败",
                  icon: 'error'
                })
              }
            },
            fail: (err) => {
              uni.showToast({
                title: '网络错误，请稍后再试',
                icon: 'none'
              });
            }
          });
        },
        },
        // 页面一加载便获取歌曲收藏列表
        onLoad() {
            this.fetchMusicData();
        }

    }
</script>

<style>

</style>